<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/switch-style.css"/>
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
    <script type="text/javascript" src="./js/switch.js"></script>
</head>
<body>
<div class="switch switch-s">
    <div class="switch-on "id="switch-on-1">
        <div class="switch-left switch-in-s" id="switch-left-1" onclick=" s.goto(2)">ON</div>
        <div class="switch-mid switch-in-s">-</div>
        <div class="switch-right switch-in-s" id="switch-right-1" onclick=" s.out(2)">OFF</div>
    </div>
</div>
<hr/>
<div class="switch switch-m">
    <div class="switch-on "id="switch-on-2">
        <div class="switch-left switch-in-s" id="switch-left-2" onclick=" s.goto(2)">ON</div>
        <div class="switch-mid switch-in-s">-</div>
        <div class="switch-right switch-in-s" id="switch-right-2" onclick=" s.out(2)">OFF</div>
    </div>
</div>
<hr/>
<div class="switch switch-l">
    <div class="switch-on "id="switch-on-3">
        <div class="switch-left switch-in-s" id="switch-left-3" onclick=" s.goto(3)">ON</div>
        <div class="switch-mid switch-in-s">-</div>
        <div class="switch-right switch-in-s" id="switch-right-3" onclick=" s.out(3)">OFF</div>
    </div>
</div>
<hr/>
<div class="switch switch-xl">
    <div class="switch-on "id="switch-on-4">
        <div class="switch-left switch-in-s" id="switch-left-4" onclick=" s.goto(4)">ON</div>
        <div class="switch-mid switch-in-s">-</div>
        <div class="switch-right switch-in-s" id="switch-right-4" onclick=" s.out(4)">OFF</div>
    </div>
</div>
<hr/>
</body>
</html>